<style>
    .scrollable {
        position: relative;
        width: 820px;
    }
    .scrollable .prev, .scrollable .next {
        position: absolute;
        top: 50px;
        color: #666;
        cursor: pointer;
    }
    .scrollable .prev { left: 10px; }
    .scrollable .next { right: 10px; }
    .scrollable .disable { color: #ddd; cursor: default; }

    .scrollable .switchable-triggerBox {
        position: absolute;
        right: 30px;
        top: -10px;
    }
    .scrollable .switchable-triggerBox li {
        float: left;
        padding: 5px;
        font-size: 18px;
        cursor: pointer;
    }
    .scrollable .switchable-triggerBox li.active {
        color: #C8282B;
    }

    .scroller {
        position: relative;
        width: <{$setting.switchable_width|default:680}>px;
        height:<{$setting.switchable_height|default:120}>px;  
        border: 1px solid #ccc;
        background-color: #F9F9F9;
        margin: auto;
        overflow: hidden;
    }
    .scroller .switchable-content img {
        float: left;
        width: <{$setting.SinglePicWidth|default:100}>px;
        height: <{$setting.SinglePicHeight|default:75}>px;
        padding: 2px;
        margin: 20px 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        display: inline !important; /* fix ie6 双边距 bug */
    }
</style>
<div id="switchable-<{$widgets_id}>" class="section scrollable" style="margin-top:70px;">
    <span id="scroller-prev" class="prev disable">&lsaquo; 上一页</span>
    <span id="scroller-next" class="next">下一页 &rsaquo;</span>
    <div class="scroller">
        <div class="switchable-content">
          <{foreach from=$setting.pic item=data key=key}><a href="<{$data.linktarget}>">
           <{if $data.link}> 
           <a href="<{$data.linktarget}>"><img  <{if $setting.islazyload eq 'true'}>img-lazyload<{else}>src<{/if}>="<{$data.link}>" /><{/if}></a>
            <{/foreach}>
        </div>
        <ul class="switchable-triggerBox">
            <li class="active">&bull;</li>
            <li>&bull;</li>
            <li>&bull;</li>
        </ul>
    </div>
</div>
<script>


  new Switchable('switchable-<{$widgets_id}>', {
            effect:"<{$setting.effect|default:'scrollx'}>",
            steps:<{$setting.steps|default:5}>,
            viewSize: [<{$setting.switchable_width|default:680}>,<{$setting.switchable_height|default:120}>],
            circular:<{$setting.around|default:true}>,
			haslrbtn:<{$setting.haslrbtn|default:true}>,
			disableCls: 'disable',
            lazyDataType: 'img',
            islazyload:<{$setting.islazyload|default:false}>
});


</script>
